<template >
    <div style="width: 100%;">
        <h1 style=" text-align: center; font-size: 30px;">欢迎来到个人中心</h1>
        <el-descriptions v-if="this.user.roleId!=2" :title="'欢迎你'+user.name" :column="2" size="40" border >
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    账号
                </template>
                {{user.no}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                   电话
                </template>
                {{user.phone}}
            </el-descriptions-item>
          <el-descriptions-item>
              <template slot="label">
                  <i class="el-icon-tickets"></i>
                  角色
              </template>
              <el-tag
               type="success"
               disable-transitions
              >{{user.roleId==0?"超级管理员":(user.roleId==1?"管理员":"餐馆账号")}}

              </el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions v-if="this.user.roleId == 2" :title="'欢迎你'+user.name" :column="3" size="40" border >
            <template slot="extra">
                <el-button type="primary"  size="small" @click="mod()">操作</el-button>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    账号
                </template>
                {{user.no}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    电话
                </template>
                {{user.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    角色
                </template>
                <el-tag
                        type="success"
                        disable-transitions
                >{{user.roleId==0?"超级管理员":(user.roleId==1?"管理员":"餐馆账号")}}

                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-shop"></i>
                    地址
                </template>
                {{this.storedetail.address}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-date"></i>
                    营业时间
                </template>
                {{this.storedetail.opentime}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-date"></i>
                    营业执照日期
                </template>
                {{this.storedetail.createtime}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-date"></i>
                    营业执照图片
                </template>
                <img :src="'http://localhost:9099'+this.storedetail.imgurl" alt="" style="width: 100px;height: 80px;">
            </el-descriptions-item>
        </el-descriptions>
        <el-dialog
                title="修改信息"
                :visible.sync="centerDialogVisible"
                width="40%"
                style="left: 60px;"
                center
        >


            <el-form ref="form"   :model="form" label-width="80px">
                <el-form-item label="餐厅账号" >
                    <el-col :span="14">
                        <el-input v-model="form.no"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="餐厅名" >
                    <el-col :span="14">
                        <el-input v-model="form.name"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="电话" >
                    <el-col :span="14">
                        <el-input v-model="form.phone"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="地址" >
                    <el-col :span="14">
                        <el-input v-model="form.address"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="营业时间" >
                    <el-col :span="14">
                        <el-input  v-model="form.opentime"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="执照日期" >
                    <el-col :span="14">
                        <el-input  v-model="form.createtime"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="菜品图片">
                    <el-col :span="14">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9099/menulist/upload/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img style="width: 200px;height: 150px;" v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible=false">取消</el-button>
                        <el-button type="primary" @click="save">确定</el-button>


                    </span>
        </el-dialog>
        <DateUtils></DateUtils>
    </div>
</template>

<script>
    import DateUtils from "./DateUtils";
    export default {
        name: "Home",
        components:{DateUtils},
        data(){
            return{
                user:{

                },
                storedetail:{

                },
                centerDialogVisible: false,
                form: {
                    id:'',
                    no:'',
                    name: '',
                    phone: '',
                    roleId: '',
                    address:'',
                    opentime:'',
                    createtime:'',
                    imgurl:''
                },
                imageUrl: ''
            }
        },computed:{},
        methods:{
            init(){
                // console.log('1111111')
                this.user=JSON.parse(sessionStorage.getItem('CurUser'));
                if(this.user.roleId==2) {
                    this.$axios.get(this.$httpUrl + "/storedetail/findByNo?no=" + this.user.no).then(res => res.data).then(res => {
                        if (res.code == 200) {
                            this.storedetail = res.data[0];

                        } else {

                            this.$axios.post(this.$httpUrl + '/storedetail/add', {
                                no: this.user.no,
                                name: this.user.name,
                                phone: this.user.phone,
                                roleId: this.user.roleId,
                                address: '',
                                opentime: '',
                                createtime: '',
                                imgurl: ''


                            }).then(res => res.data).then(res => {
                                if (res.code == 200) {
                                    console.log(111)
                                } else {

                                    alert('插入信息失败!')
                                    return false;
                                }
                            })

                        }
                    })
                }
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.form.imgurl=res.data;
                // console.log(this.form.imgurl)
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            resetForm() {
                this.$refs.form.resetFields();
            },
            mod() {
                //赋值到表单
                // sessionStorage.setItem("storedetail",JSON.stringify(this.storedetail))
                // this.$router.push('/Detail');
                this.centerDialogVisible = true;
                this.$nextTick(() => {

                    this.form.id = this.storedetail.id;
                    // console.log(this.form.id);
                    this.form.no=this.storedetail.no;
                    this.form.name = this.storedetail.name;
                    this.form.phone = this.storedetail.phone;
                    this.form.roleId = this.storedetail.roleId;
                    this.form.address = this.storedetail.address;
                    this.form.opentime = this.storedetail.opentime;
                    this.form.createtime =this.storedetail.createtime;
                    this.form.imgurl = this.storedetail.imgurl;
                    this.imageUrl=this.$httpUrl+this.storedetail.imgurl;

                })
            },
            save() {

                            this.doMod();

                    } ,
            doMod() {
                this.$axios.post(this.$httpUrl + '/storedetail/update', this.form
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.$message({
                            message: '修改成功!',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.init();
                        this.resetForm()

                    } else {
                        this.$message({
                            message: '添加失败!',
                            type: 'error'
                        });
                    }
                })
            },
        },
        created() {
            this.init()
        }
    }
</script>

<style scoped>

</style>